<script setup>
// import axios from '@/utils/request.js'
import { ref } from 'vue'
// import { useRouter } from 'vue-router'
import { Message } from '@arco-design/web-vue'
const user = ref({
  phone: '',
  password: ''
})
// const router = useRouter()
const login = (e) => {
  e.preventDefault();
  // axios.post('user/login', user.value).then((res) => {
  //   if (res.data.code == 200) {
  //     router.push('book');
  //   } else {
  //     Message.error({content:res.data.message, position: 'bottom'})
  //   }
  // })
}
</script>

<template>
  <div class="box">
    <h1 class="title">HLog</h1>
    <div class="container">
      <h2>登录</h2>
      <a-link href="link" class="nologin">游客登录&nbsp;>></a-link>
      <form class="form" @submit="login($event)">
        <input type="phone" v-model="user.phone" id="phone" required placeholder="账号/手机号">
        <input type="password" v-model="user.password" id="password" required placeholder="密码">
        <button>登录</button>
      </form>
      <a-space class="other">
        <a-link href="/user/register" class="register">注册</a-link>
        <a-link href="/user/resetpw" class="forgetpw">忘记密码</a-link>
      </a-space>
    </div>
  </div>
</template>

<style lang="less" scoped>
.nologin {
  position: absolute;
  top: 20px;
  right: 10px;
  color: #897fde;
  font-size: 12px;
  
}
.other {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
  .register ,  .forgetpw {
    color: #442B95;
    font-size: 15px;
  }
}
.title {
  font-size: 60px;
  position: fixed;
  top: 5%;
  color: white;
}

.box {
  background-image: linear-gradient(to right, #a8c0ff, #3f2b96) !important;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  width: 400px;
  padding: 30px;
  background-color: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.3);
  position: relative;
}

h2 {
  text-align: center;
  color: #3f2b96;
}

input[type="phone"],
input[type="password"] {
  width: 100%;
  padding: 12px 20px;
  margin-top: 20px;
  margin-bottom: 30px;
  border: none;
  border-radius: 4px;
  box-sizing: border-box;
  background-color: #f2f2f2;
}

button {
  width: 100%;
  padding: 12px;
  background-color: #3f2b96;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-weight: bold;
}

button:hover {
  background-color: #6e43b4;
}
</style>